<!--
 * @FileDescription: 修改邮箱界面
 * @Author: 夏世龙
 * @Date: 2021-7-4
 * @LastEditors: 夏世龙
 * @LastEditTime: 2021-7-7 20：18
 -->
<template>
	<el-form :model="dynamicValidateForm" :rules="rulesList" ref="dynamicValidateForm" label-width="100px"
		class="demo-dynamic emial_Form">
		<h1>修改邮箱</h1>
		<el-form-item label="原邮箱">
			<el-input :disabled="true" :placeholder="teacherinfo.email"></el-input>
		</el-form-item>

		<el-form-item label="用户密码" prop="UserPassWord">
			<el-input type="password" placeholder="请输入您的密码" autocomplete="off"
				v-model="dynamicValidateForm.UserPassWord"></el-input>
		</el-form-item>

		<el-form-item prop="email" label="新邮箱">
			<el-input v-model="dynamicValidateForm.email" placeholder="请输入新邮箱"></el-input>
			<el-button type="success" v-show="show" @click="SendCode()">发送验证码</el-button>
			<el-button type="success" v-show="!show" :disabled="true">剩余{{timerCount}}秒</el-button>
		</el-form-item>

		<el-form-item label="验证码" prop="VerificationCode">
			<el-input v-model="dynamicValidateForm.VerificationCode" placeholder="请输入验证码"></el-input>
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="Submit()">提交</el-button>
			<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
		</el-form-item>
	</el-form>
</template>
<script>
	export default {
		data() {
			var validatePassword = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入您的密码"));
				} else {
					callback();
				}
			};
			var validateNewEmail = (rule, value, callback) => {
				const mal = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
				if (value === "") {
					callback(new Error("请输入您的新邮箱"));
				}

				if (!(mal.test(value))) {
					callback(new Error('请输入正确邮箱'))
				}

				if (value === this.teacherinfo.email) {
					callback(new Error('原邮箱与新邮箱不能相同！'))
				} else {
					callback();
				}
			};

			var validateVerificationCode = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入验证码"));
				} else {
					callback();
				}
			};
			return {
				dynamicValidateForm: {
					VerificationCode: '', //验证码
					UserPassWord: '', //用户密码
					email: '' //邮箱
				},
				rules: {
					UserPassWord: [{
						validator: validatePassword,
						trigger: "blur"
					}],
					VerificationCode: [{
						validator: validateVerificationCode,
						trigger: "blur"
					}],
					email: [{
						validator: validateNewEmail,
						trigger: "blur"
					}]
				},
				rules2: {
					UserPassWord: [{
						validator: validatePassword,
						trigger: "blur"
					}],
					email: [{
						validator: validateNewEmail,
						trigger: "blur"
					}]
				},
				show: true,
				timerCount: 0,
				rule: '',
				teacherinfo: {},
			};
		},
		mounted() {
			if (localStorage.getItem('startTime')) {
				this.show = false
				this.timing()
			} else {
				this.show = true
			}

			this.teacherinfo = this.$store.state.info
			console.log(this.teacherinfo)
		},
		computed: {
			rulesList: function() {
				if (this.rule === 1) {
					return this.rules
				} else {
					return this.rules2
				}
			}
		},
		methods: {
			Submit() {
				this.rule = 1
				let _that = this;
				this.$refs["dynamicValidateForm"].validate((valid) => {
					if (valid) {
						_that.changeEmailAxios();
					}
				});
			},
			SendCode() {
				this.rule = 2
				let _that = this
				this.$refs['dynamicValidateForm'].validate((valid) => {
					if (valid) {
						_that.sendEmailAxios();
					}
				});
			},
			resetForm(formName) {
				//清空文本域
				this.$refs[formName].resetFields();
			},
			checkEmailAxios() {
				//检查邮箱验证码方法
				var _that = this;
				this.$api.login
					.checkEmail({
						//调用检查邮箱api
						code: this.dynamicValidateForm.VerificationCode,
						email: this.dynamicValidateForm.email,
					})
					.then((item) => {
						console.log(item);
						let a = item.data;
						if (a.code == 200) {

						} else {
							_that.$message({
								showClose: true,
								message: "邮箱验证码有误！",
								type: "error",
							});
						}
					});
			},
			timing() {
				this.show = false
				const seconds = 60
				let startTime = localStorage.getItem('startTime');
				let nowTime = new Date().getTime();
				if (startTime) { //有值的情况
					this.show = false
					let surplus = seconds - parseInt((nowTime - startTime) / 1000, 10); //剩余时间
					this.timerCount = surplus <= 0 ? 0 : surplus; //判断是否小等于0
				} else { //无值的情况
					this.timerCount = seconds;
					localStorage.setItem('startTime', nowTime);
				}

				let timer = setInterval(() => {
					if (this.timerCount > 0 && this.timerCount <= seconds) {
						this.timerCount--;
					} else {
						localStorage.removeItem('startTime');
						clearInterval(timer);
						this.show = true
					}
				}, 1000);
			},
			sendEmailAxios() {
				this.timing()
				//发送验证码方法
				let _that = this;
				this.$api.login
					.sendEmail({
						email: this.dynamicValidateForm.email,
					})
					.then((item) => {
						console.log(item);
						let a = item.data;
						_that.$message({
							showClose: true,
							message: '发送成功',
							type: "success",
						});

					});
			},
			changeEmailAxios() {
				this.$api.teacher
					.changeEmail({
						code: this.dynamicValidateForm.VerificationCode,
						email: this.dynamicValidateForm.email,
						password: this.dynamicValidateForm.UserPassWord,
					})
					.then((item) => {
						console.log(item);
						let a = item.data;
						if (a.code === 200) {
							this.$message({
								showClose: true,
								message: "修改成功",
								type: "success",
							});
							this.teacherinfo.email = this.dynamicValidateForm.email;
							this.$store.commit("setInfo", this.teacherinfo);
							this.resetForm('dynamicValidateForm');

						} else {
							this.$message({
								showClose: true,
								message: "修改失败",
								type: "error",
							});
						}
					});
			},
		},
	};
</script>
<style scoped>
	.el-input {
		width: 300px;
	}

	h1 {
		padding-left: 50px;
		text-align: center;
	}

	.emial_Form {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
